<template>
	<view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>运输路线</text>
			</view>
		</view>
		<view class="drawer-content show">
			<view style="text-align: center;font-size: 10px;"><text>计划{{pojo.sdsj}}送达</text></view>
			<view class="container"><text class="labela">{{dza}}</text><icon class="iconfont icon-changjiantou"></icon><text class="valuea" >{{dzb}}</text></view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>交付货物</text>
			</view>
			<view class="drawer-header">
				<text>共计：{{pojo.ds}}单</text>
			</view>
			<view class="search-container">
			    运单号：
			</view>
		</view>
		<view class="drawer-content show">
			<view>
				<view class="table-container">
				  <view class="table-row" v-for="(item, index) in pojo.hr" :key="index">
				    <view class="table-cell">{{ item.ydh }}</view>
				    <view class="table-cell">
				      {{ item.ds }}<template v-if="item.ds !== ''">个</template>
				    </view>
				    <view class="table-cell">
				      {{ item.zl }}<template v-if="item.zl !== ''">kg</template>
				    </view>
				  </view>
				</view>
			</view>
		</view>
		<view class="drawer-button">
			<view class="drawer-header">
				<text>交货信息</text>
			</view>
			<view class="drawer-header">
				<text>请上传回单凭证</text>
			</view>
			<view class="drawer-header">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatara" v-if="tpa===''" style="margin-bottom: 75rpx;">
					<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
				</button>
				<view class="avatar-row">
					<image class="avatar" :src="tpa" v-if="tpa!=''"></image>
				</view>
			</view>
			<view class="drawer-header">
				<text>请上传货品信息</text>
			</view>
			<view class="drawer-header">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatarb" v-if="tpb===''" style="margin-bottom: 75rpx;">
					<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
				</button>
				<view class="avatar-row">
					<image class="avatar" :src="tpb" v-if="tpb!=''"></image>
				</view>
			</view>
			<view class="fixed-button-row">
				<button type="primary" style="width: 100%;" @click="jiaofu" :disabled="isButtonDisabled">交付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pojo:{
					id:'',
					lxr:'',
					cph:'',
					phone:'',
					ds:'',
					sj:[],
					hr:[],
					jda:'',
					wda:'',
					jdb:'',
					wdb:'',
					thsj:'',
					sdsj:'',
					startAddress: '',
					endAddress: ''
				},
				dza:'路线A\n路线A.a',
				tpa:'',
				tpb:'',
				dzb:'路线B\n路线B.b',
			}
		},
		methods: {
			onChooseAvatara(e) {
				const { avatarUrl }=e.detail
				this.tpa=avatarUrl
			},
			onChooseAvatarb(e) {
				const { avatarUrl }=e.detail
				this.tpb=avatarUrl
			},
			jiaofu(){
				console.log("交付")
			}
		},
		onLoad:function(options){
			const receivedEntity = JSON.parse(decodeURIComponent(options.value));
			this.pojo=receivedEntity
		},
		computed:{
			isButtonDisabled(){
				return this.tpb==='' || this.tpa === '';
			},
		}
	}
</script>

<style>
.drawer-content {
  display: none;
  position: relative;
  padding: 10px;
  
}

.drawer-content.show {
  display: block;
}
.container {
    display: flex;
}
.labela {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
}
.icon-changjiantou {
    display: inline-block; /* 确保它作为一个块级元素显示 */
    font-size: 5em; /* 调整图标大小 */
	height: 50rpx;
    transform: scaleX(3); /* 横向拉伸两倍 */
    transform-origin: 0 50%; /* 从左端开始拉伸 */
}
.iconfont {
  margin-right: 0%; /* 新增 */
}
.valuea {
    margin-left: 40%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #ccc;
}
.table-cell {
  flex: 1;
  padding: 0 10rpx;
  text-align: center;
}
.avatar{
	width: 25%;
	height: 100rpx;
	margin-bottom: 75rpx;
}
.avatar-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20rpx;
}
.fixed-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  z-index: 1000; /* 确保按钮层叠在其他内容之上 */
}

/* 按钮样式 */
.fixed-button-row button {
  width: 50%;
  height: 100%;
  line-height: 80rpx;
  text-align: center;
  border: none;
  color: #333;
  font-size: 30rpx;
}
</style>
